<!-- 角色管理 -->

<template>
    <KeepAlive :include="[]">
        <component :is="curComponent" :roleInfo="roleInfo" @updateRoleInfo="updateRoleInfo"/>
    </KeepAlive>
</template>

<script setup>
import { ref } from 'vue';

import RoleAdd from './c/RoleAdd.vue';
import RoleEdit from './c/RoleEdit.vue';
import RoleList from './c/RoleList.vue';
import RolePreview from './c/RolePreview.vue';

const type = ref('list');
const roleInfo = ref({});

const componentMap = {
    'list': RoleList,
    'edit': RoleEdit,
    'add': RoleAdd,
    'preview': RolePreview
};

const curComponent = ref(RoleList);

const updateRoleInfo = (val) => {
    type.value = val.type;
    roleInfo.value = val.roleInfo;
    
    curComponent.value = componentMap[type.value];
};

</script>

<style lang="scss">
@import url('./index.scss');
</style>